<template>
    <div class="host-item">
        <div class="main-body">
            <div class="author-info">
                <simple-user-info :user="post.author"></simple-user-info>
            </div>
            <div class="content" v-html="post.content"></div>
        </div>
        <div class="footer center-flex-box">
            <div class="text">
                <span class="text-item">
                    {{publishTime}}
                </span>
                <a class="text-item" @click="comment">评论</a>
            </div>
        </div>
    </div>
</template>

<script>
    import SimpleUserInfo from '@/components/user/SimpleUserInfo'
    import { convertTime } from '@/utils/date'

    export default {
        name: 'hostItem',
        components: {
            SimpleUserInfo
        },
        props: ['post'],
        computed: {
            publishTime () {
                return convertTime(this.post.publishTime)
            }
        },
        methods: {
            comment () {
                this.$emit('comment')
            }
        }
    }
</script>

<style lang="less" scoped>
    .host-item {
        width: 100%;
        margin: 16px 0;
        border-bottom: #9d9d9d 1px solid;

        .main-body {
            display: -webkit-inline-flex;
            margin-top: 16px;
            width: 100%;

            .reviewer-info {
                display: inline-block;
                height: 100%;
                float: left;
            }

            .content {
                margin: 32px 32px;
                text-align: left;

                /deep/ img {
                    width: 100%;
                }
            }
        }

        .footer {
            width: 100%;
            margin-bottom: 16px;
            height: 50px;

            .text {
                height: 100%;
                width: 30%;
                font-size: 16px;
                line-height: 50px;
                float: right;

                .text-item {
                    margin: 0 32px;
                }

                a {
                    text-decoration: none;
                    cursor: pointer;
                    color: #5095ff;
                }

                a:link {
                    color: #5095ff;
                }

                a:visited {
                    color: #5095ff;
                }

                a:hover {
                    color: rgba(255, 151, 60, 0.8);
                }

                a:active {
                    color: rgba(255, 86, 25, 0.8);
                }
            }
        }
    }
</style>
